<template>
  <div v-if="pathPoints.length" class="w-80 px-2 h-full">
    <el-scrollbar class="h-full" style="--el-scrollbar-opacity: 0">
      <el-collapse v-model="activeNames" accordion>
        <el-collapse-item
          v-for="(point, index) in pathPoints"
          :key="index"
          :name="index.toString()"
        >
          <!-- 自定义标题栏 -->
          <template #title>
            <div class="flex justify-between items-center w-full px-2">
              <span>路线点 {{ index + 1 }}</span>
              <!-- 操作选择区 -->
              <el-dropdown trigger="click" @command="handleCommand">
                <el-button link size="small" @click.stop>
                  <el-icon><More /></el-icon>
                </el-button>
                <template #dropdown>
                  <el-dropdown-menu>
                    <!-- 插入选项 -->
                    <el-dropdown-item
                      v-if="index > 0"
                      :command="{ type: 'insert', position: 'before', index }"
                    >
                      <el-icon><Plus /></el-icon>
                      在前面插入
                    </el-dropdown-item>
                    <el-dropdown-item
                      v-if="index < pathPoints.length - 1"
                      :command="{ type: 'insert', position: 'after', index }"
                    >
                      <el-icon><Plus /></el-icon>
                      在后面插入
                    </el-dropdown-item>

                    <!-- 删除选项 -->
                    <el-dropdown-item :command="{ type: 'delete', point, index }">
                      <el-icon><Delete /></el-icon>
                      删除
                    </el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </div>
          </template>

          <div class="flex flex-col gap-2">
            <!-- 坐标 -->
            <div class="flex justify-between gap-2">
              <span class="flex-1 border rounded p-1 border-sky-400"
                >X: {{ point.getCoordinates().x.toFixed(6) }}</span
              >
              <span class="flex-1 border rounded p-1 border-sky-400"
                >Y: {{ point.getCoordinates().y.toFixed(6) }}</span
              >
            </div>
            <!-- 速度区 -->
            <div class="flex justify-between gap-2 items-center">
              <span>速度:</span>
              <el-input-number
                :model-value="pathPointsData[index]?.speed"
                :min="0"
                :precision="0"
                class="flex-1"
                size="small"
                @update:model-value="($event: number) => updateSpeed(index, $event)"
              >
                <template #suffix>m/s</template>
              </el-input-number>
            </div>
            <!-- 任务点 -->
            <el-button
              type="primary"
              size="small"
              @click="() => configureTaskPoint(point, index)"
              class="w-full"
            >
              配置任务
            </el-button>
          </div>
        </el-collapse-item>
      </el-collapse>
    </el-scrollbar>
  </div>
</template>

<script setup lang="ts">
import {
  activateInsertMode,
  activeNames,
  configureTaskPoint,
  deletePathPoint,
  pathPoints,
  pathPointsData
} from '@/shared/map/path'
import { Delete, More, Plus } from '@element-plus/icons-vue'
import { ElMessageBox } from 'element-plus'

const handleDelete = async (point: any, index: number) => {
  try {
    await ElMessageBox.confirm('确定要删除该路线点吗?', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })
    await deletePathPoint(point, index)
  } catch {
    // 用户取消删除
  }
}

const handleCommand = async ({
  type,
  point,
  index,
  position
}: {
  type: string
  point?: any
  index: number
  position?: 'before' | 'after'
}) => {
  if (type === 'delete') {
    await handleDelete(point!, index)
  } else if (type === 'insert' && position) {
    handleInsert(index, position)
  }
}

const handleInsert = (index: number, position: 'before' | 'after') => {
  // 计算插入点的初始坐标
  const currentPoint = pathPoints.value[index]
  let targetPoint

  if (position === 'before') {
    targetPoint = pathPoints.value[index - 1]
    activeNames.value = index.toString()
  } else {
    targetPoint = pathPoints.value[index + 1]
    activeNames.value = (index + 1).toString()
  }

  const midX = (currentPoint.getCoordinates().x + targetPoint.getCoordinates().x) / 2
  const midY = (currentPoint.getCoordinates().y + targetPoint.getCoordinates().y) / 2

  activateInsertMode(index, position, { x: midX, y: midY })
}

const updateSpeed = (index: number, speed: number) => {
  pathPointsData.value[index].speed = speed
}
</script>
